import { ElMessage } from 'element-plus'

// 字体号
export const FONT_SIZE = [
	{label: '一号', value: '26pt'},
	{label: '小一', value: '24pt'},
	{label: '二号', value: '22pt'},
	{label: '小二', value: '18pt'},
	{label: '三号', value: '16pt'},
	{label: '小三', value: '15pt'},
	{label: '四号', value: '14pt'},
	{label: '小四', value: '12pt'},
	{label: '五号', value: '10.5pt'},
	{label: '小五', value: '9pt'},
	{label: '六号', value: '7.5pt'},
	{label: '小六', value: '6.5pt'},
	{label: '七号', value: '5.5pt'},
	{label: '八号', value: '5pt'},
]
FONT_SIZE.getFontSize = function (label) {
	let row = this.find(item => item.label == label);
	return row.value;
}

// 标题列表
export const H_LIST = [
	{label: '标题1', value: 'h1', style: {
		'font-size': FONT_SIZE.getFontSize('二号'),
		'line-height': 2.4,
		'font-family': '宋体'
	}},
	{label: '标题2', value: 'h2', style: {
		'font-size': FONT_SIZE.getFontSize('三号'),
		'line-height': 1.72,
		'font-family': '黑体'
	}},
	{label: '标题3', value: 'h3', style: {
		'font-size': FONT_SIZE.getFontSize('三号'),
		'line-height': 1.72,
		'font-family': '宋体'
	}},
	{label: '标题4', value: 'h4', style: {
		'font-size': FONT_SIZE.getFontSize('四号'),
		'line-height': 1.55,
		'font-family': '黑体'
	}},
	{label: '标题5', value: 'h5', style: {
		'font-size': FONT_SIZE.getFontSize('四号'),
		'line-height': 1.55,
		'font-family': '宋体'
	}},
	{label: '标题6', value: 'h6', style: {
		'font-size': FONT_SIZE.getFontSize('小四'),
		'line-height': 1.32,
		'font-family': '黑体'
	}},
];

// 输入框类型
export const INPUT_TYPE = [
	{label: '输入框', value: 'input'},
	{label: '数字框', value: 'inputNumber'},
	{label: '时间框-天', value: 'date-day'},
	{label: '时间框-月', value: 'date-month'},
	{label: '时间框-年', value: 'date-year'},
];

// 验证规则类型
export const CHECK_TYPE = [
	{label: '非空', value: '^.+$'},
	{label: '手机号码', value: '^1\d{10}$'},
	{label: '电话号码', value: '^((0\d{2,3}-\d{7,8})|(1\d{10}))$'},
	{label: '自定义规则', value: 'function'}
];

// 表单事件文本
export const FORM_FUNCTION_HEADER = 'function({request, route, form, setText}) {';
export const FORM_FUNCTION_FOOTER = '}';

// 表格
export const TABLE_TABS = [
	{label: '表格', key: 'table'},
	{label: '添加', key: 'add'},
	{label: '删除', key: 'delete', header: 'function (oTbody, ElMessage) {', footer: '}'},
	{label: '改变', key: 'change', header: 'function (ElMessage, tableTools) {', footer: '}'},
	{label: '保存', key: 'save', header: 'function (request, ElMessage, tableTools) {', footer: '}'},
]


// 组件列表
export const COMPONENT_LIST = [
	{
		name: '标题',
		type: 'h',
		attr: {
			text: '标题',
			type: 'h1',
			style: {
				'text-align': 'center',
				...H_LIST[0].style
			},
			onMounted: ''
		}
	},
	{
		name: '行',
		type: 'line',
		attr: {
			style: {
				'margin': '0 0 10px',
				'text-indent': '2em'
			}
		}
	},
	{
		name: '文本',
		type: 'text',
		attr: {
			text: '文本',
			style: {
				'display': 'inline-block',
				'font-family': '宋体',
				'font-size': FONT_SIZE.getFontSize('五号'),
				'line-height': 1.5
			},
			onMounted: ''
		}
	},
	{
		name: '输入框',
		type: 'input',
		attr: {
			state: 1, // 1文本，2编辑
			text: '',
			key: '',
			type: 'input',
			style: {
				display: 'inline-block',
				'font-family': '宋体',
				'font-size': FONT_SIZE.getFontSize('五号'),
			},
			onMounted: '',
			onChange: '',
			// 验证规则类型
			checkType: '',
			checkFunction: '',
		}
	},
	{
		name: '表格',
		type: 'table',
		attr: {
			text: '表格',
			tableCode: '',
			addCode: '',
			deleteCode: '',
			changeCode: '',
			saveCode: '',
		}
	},
]




// 处理样式
export const TRANS_STYLE = {
	// 字符串转JSON
	stringToJson(data) {
		try {
			let style = data.replace(/' '/g, '');
			style = style.split(';');
			let oStyle = {};
			style.forEach(item => {
				if(item) {
					let arr = item.split(':');
					oStyle[arr[0]] = arr[1];
				}
			})
			return oStyle;
		} catch(err) {
			ElMessage.error('标题样式转JSON格式失败');
			console.log(err);
			return {}
		}
	},
	// JSON转字符串
	jsonToString(data) {
		let res = "";
		for(let key in data) {
			res+=key+':'+data[key]+';';
		}
		return res;
	},
	// 将JSON数据加入到输入框
	jsonJoinInput(jsonStyle, iptStyle) {
		try {
			let style = this.stringToJson(iptStyle);
			style = Object.assign(style, jsonStyle);
			return this.jsonToString(style);
		} catch(err) {
			ElMessage.error('改变标题样式报错');
			console.log(err);
			return iptStyle;
		}
	}
} 

// 创建导出节点
export function creatFragment(list) {
	var oFrag = document.createDocumentFragment();
	for(let i = 0; i < list.length; i++) {
		let item = list[i];
		if(item.type == 'h') {
			oFrag.appendChild(createH(item));
		} else if (item.type == 'line') {
			oFrag.appendChild(createLine(item));
		} else if (item.type == 'table') {
			oFrag.appendChild(createTable(item));
		}
	}
	return oFrag;
}
// 创建h
function createH(item) {
	let oDom = document.createElement(item.attr.type);
	for(let key in item.attr.style) {
		oDom.style[key] = item.attr.style[key];
	}
	oDom.innerHTML = item.attr.text;
	return oDom;
}

// 创建行
function createLine(item) {
	let oDom = document.createElement('div');
	for(let key in item.attr.style) {
		oDom.style[key] = item.attr.style[key];
	}
	for(let i = 0; i < item.children.length; i++) {
		let bItem = item.children[i];
		if(bItem.type == 'text') {
			oDom.appendChild(creatText(bItem));
		} else if(bItem.type == 'input') {
			oDom.appendChild(creatInput(bItem));
		}
	}
	return oDom;
}

// 创建文本
function creatText(item) {
	let oDom = document.createElement('span');
	for(let key in item.attr.style) {
		oDom.style[key] = item.attr.style[key];
	}
	oDom.innerHTML = item.attr.text;
	return oDom;
}

// 创建输入框
function creatInput(item) {
	let oDom = document.createElement('span');
	for(let key in item.attr.style) {
		oDom.style[key] = item.attr.style[key];
	}
	oDom.innerHTML = item.attr.text;
	return oDom;
}

// 创建表格
function createTable(item) {
	let oDom = document.createElement('table');
	oDom.setAttribute('border', '1');
	oDom.style.borderCollapse = 'collapse';
	let aArr = item.attr.tableCode.split('##');
	let html = '';
	aArr.forEach(str => {
		if(str.indexOf('json:') != 0) {
			html += str;
		} else {
			let obj = JSON.parse(str.substring(5));
			html+=obj.value;
		}
	})
	oDom.innerHTML = html;
	return oDom;
}



